<template>
  <n-menu
      :collapsed-width="64"
      :collapsed-icon-size="22"
      :options="mainMenuOptions"
      :collapsed="props.collapsed"
      :mode="props.model"
  />
</template>

<script setup lang="ts">
//@ts-ignore
import {useUserConfig} from "/@bean/GlobalConfig";
import {
  LibraryOutline,
  MoonOutline,
} from '@vicons/ionicons5'
import {h, reactive, ref, toRefs} from "vue";
import {storeToRefs} from "pinia";
//@ts-ignore
import {renderIcon} from "/@utils/GlobalFunction";
import {RouterLink} from "vue-router";

//props
const props = defineProps({
  model : {
    type: String,
    default: 'vertical' // vertical | horizontal
  },
  collapsed: {
    type: Boolean,
    default: false
  }
});


const storesUserConfig = useUserConfig();
const { userInfo } = storeToRefs(storesUserConfig);

const is_superuser = userInfo.value.is_superuser;
// 菜单栏配置
const mainMenuOptions = reactive([
  {
    label: () => h(
        RouterLink,
        {
          to: '/',
        },
        {default: () => '首页'}
    ),
    key: 'home',
    icon: renderIcon(LibraryOutline),
  },
  {
    label: '用户管理',
    key: 'user',
    show:is_superuser,
    icon: renderIcon(LibraryOutline),
    children: [
      {
        label: () => h(
            RouterLink,
            {
              to: '/admin/UserList',
            },
            {default: () => '用户列表'}
        ),
        icon: renderIcon(MoonOutline),
        key: 'user-list',
      }
    ]
  },
])
</script>

<style scoped>

</style>